<template>
  <div class="income-statement-table">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="category" label="项目" width="200" />
      <el-table-column prop="item" label="明细" width="200" />
      <el-table-column prop="amount" label="金额(元)" align="right">
        <template #default="scope">
          <span :class="getAmountClass(scope.row.amount)">
            {{ formatCurrency(scope.row.amount) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="percentage" label="占比" align="right" width="100">
        <template #default="scope">
          {{ scope.row.percentage }}%
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { computed } from 'vue'

export default {
  name: 'IncomeStatementTable',
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props) {
    const formatCurrency = (value) => {
      return new Intl.NumberFormat('zh-CN', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      }).format(value || 0)
    }
    
    const getAmountClass = (amount) => {
      if (amount > 0) return 'positive-amount'
      if (amount < 0) return 'negative-amount'
      return ''
    }
    
    const tableData = computed(() => {
      if (!props.data || Object.keys(props.data).length === 0) {
        return []
      }
      
      const totalIncome = props.data.totalIncome || 0
      const totalCost = props.data.totalCost || 0
      
      return [
        // 收入类
        { category: '收入', item: '学习收入', amount: props.data.studyIncome, percentage: totalIncome > 0 ? ((props.data.studyIncome / totalIncome) * 100).toFixed(1) : '0.0' },
        { category: '', item: '成就收入', amount: props.data.achievementIncome, percentage: totalIncome > 0 ? ((props.data.achievementIncome / totalIncome) * 100).toFixed(1) : '0.0' },
        { category: '', item: '收入总计', amount: totalIncome, percentage: '100.0' },
        
        // 成本类
        { category: '成本', item: '时间成本', amount: -props.data.timeCost, percentage: totalCost > 0 ? ((props.data.timeCost / totalCost) * 100).toFixed(1) : '0.0' },
        { category: '', item: '机会成本', amount: -props.data.opportunityCost, percentage: totalCost > 0 ? ((props.data.opportunityCost / totalCost) * 100).toFixed(1) : '0.0' },
        { category: '', item: '成本总计', amount: -totalCost, percentage: '100.0' },
        
        // 利润
        { category: '利润', item: '净学习收益', amount: props.data.netLearningProfit, percentage: '' },
        
        // 效率指标
        { category: '效率指标', item: '学习效率', amount: props.data.efficiencyRatio, percentage: '%' },
        { category: '', item: '投资回报率', amount: props.data.roiRatio, percentage: '%' }
      ]
    })
    
    return {
      tableData,
      formatCurrency,
      getAmountClass
    }
  }
}
</script>

<style scoped>
.income-statement-table {
  margin: 20px 0;
}

.positive-amount {
  color: #67c23a;
  font-weight: bold;
}

.negative-amount {
  color: #f56c6c;
  font-weight: bold;
}
</style>




